<!-- 首页 密码登录 -->
<template>
    <view class="login-box">
        <view class="top-one-click-login-box">
            <view @click="loginFn(item)" v-for="item in state.loginList" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="top-slogn-box">
            <view class="top-slogn">
                你好，
            </view>
            <text>欢迎来到媛世界</text>
        </view>
        <view class="mobile-number">
            <text>+86</text><van-field v-model="state.mobileNumber" placeholder="请输入手机号" />
        </view>
        <view class="mobile-number mobile-number-password">
            <input v-model="state.passwordNumber" :type="state.isText ? 'password' : 'text'" placeholder="请输入密码" />
            <view @click="isTextFn()"><van-icon size="20" v-if="state.isText" name="closed-eye" /><van-icon v-else
                    name="eye-o" size="20" /></view>
        </view>
        <van-button type="primary" :loading="isLoading" class="mobile-login-btn" @click="passwordLogin()">验证并登录</van-button>
        <agreement :agreementList="state.agreementList" @update:isAgree="ev => state.isAgree = ev" />
    </view>
</template>

<script setup>
import {
    LoginPwd
} from "@/api/login/index.js"

import agreement from "@/components/agreement/index.vue"
import { reactive, getCurrentInstance, onMounted, ref } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

let { proxy } = getCurrentInstance()
const state = reactive({
    loginList: [
        {
            id: 1,
            name: "←",
            url: "/pages/login/mobileNumberLogin/index"
        },
        {
            id: 2,
            name: "忘记密码",
            url: "/pages/login/retrievePassword/index"
        }
    ],
    agreementList: [
    {
            id: 1,
            name: "《媛世界用户协议》",
            url: "https://www.ysjcp.com/UserUseAgreement.html"
        },
        {
            id: 2,
            name: "《媛世界隐私条款》",
            url: "https://www.ysjcp.com/PrivacyAgreement.html"
        }
    ],
    mobileNumber: "13268529963",
    passwordNumber: "",
    isText: true,
    isAgree: false
})

const loginFn = (item) => {
    let { url } = item
    uni.navigateTo({
        url
    })
}

const isTextFn = () => {
    state.isText = !state.isText
}

let isLoading = ref(false)

const passwordLogin = async () => {
    if (state.mobileNumber == "" || state.passwordNumber == "" || !state.isAgree) {
        let msg = state.mobileNumber == "" ? '请输入手机号' : state.passwordNumber == "" ? "请输入密码" : state.isAgree == false ? "请同意协议条款" : ''
        uni.showToast({
            title: msg,
            icon: "none",
        });
        return
    }
    localStorage.setItem("userInfo",{})
    try {
        let params = {
            "ClientCode": "Android",
            "ClientSecret": "AndroidClientSecrets",
            phone: state.mobileNumber,
            pwd: state.passwordNumber,
        }
        isLoading.value = true
        setAuthorization('token','')
        let data = await proxy.$post(LoginPwd, params)
        if (data.code == 200) {
            let token = JSON.stringify(data.data.Token)
            let userInfo = JSON.stringify(data.data.UserInfo)
            setAuthorization("phoneNumber", state.mobileNumber)
            setAuthorization("token", token)
            setAuthorization("userInfo", userInfo)
            setAuthorization("userId", data.data.UserInfo.ID)
            setAuthorization("active", 0)
            uni.navigateTo({
                url: "/pages/home/index"
            })
        }
        isLoading.value = false
    } catch (err) {
        isLoading.value = false
        uni.showToast({
            title: err.message,
            icon: "none",
        });
    }
}

</script>

<style lang="scss" scoped>
.login-box {
    position: fixed;
    width: 100%;
    height: 100%;
}

.top-one-click-login-box {
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #262626;
    margin: 0 60rpx;
    font-weight: 600;
    margin-bottom: 120rpx;
}

.mobile-number {
    margin: 220rpx 60rpx 40rpx 60rpx;
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #C6C6C6;

    text {
        border-right: 1px solid #C6C6C6;
        padding-right: 36rpx;
        margin-right: 36rpx;
    }

    .van-field {
        padding: 0;
        font-size: 36rpx;

        :deep(.van-field__control) {
            font-size: 36rpx;
            border: none
        }
    }
}

.mobile-number-password {
    margin: 0 60rpx 50rpx 60rpx;

    input {
        width: 100%;
        margin-right: 10rpx;
    }
}

.top-slogn-box {
    padding: 0 60rpx;
    font-size: 48rpx;
    text-align: left;
}

.top-logo-box {
    .logo-text {
        text-align: center;
        font-size: 40rpx;
        color: #5C5C5C;
    }

    .top-logo {
        display: flex;
        justify-content: center;
        padding-top: 314rpx;

        img {
            width: 312rpx;
            height: 104rpx;
        }
    }
}

.mobile-login-btn {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    width: calc(100vw - 120rpx);
}
</style>
